<template>
	<view>
		<u-navbar title="订单详情" placeholder :autoBack="true" leftIconColor="#E6A5B4" bgColor="#000000"
			:titleStyle="titleStyle">
		</u-navbar>

		<view style="padding-bottom: 110rpx;">
			<view class="addressV">
				<view class="addressTv1">收货地址</view>
				<view class="addressTv2">{{orderInfo.delivery.username}} {{orderInfo.delivery.mobile}}</view>
				<view class="addressTv3">{{orderInfo.delivery.address}}</view>
			</view>

			<view class="addressV">
				<view class="infoBg" v-for="(item,index) in orderInfo.products" :key="index">
					<image class="infoIv" :src="item.image"></image>
					<view class="infoRightV">
						<view class="infoTv1">{{item.title}}</view>
						<view class="infoTv2" v-if="false">规格：</view>
						<view class="infoTv2" v-if="false">规格：默认</view>
						<view class="infoVV">
							<view class="infoTv3">x{{item.number}}</view>
							<view class="infoTv4">¥{{item.price*item.number}}</view>
						</view>
						
						<view v-if="orderInfo.state==4" class="itemBt3" @click.stop="onOrderEvaluateClick(item,orderInfo.order_id)">立即评价</view>
					</view>
				</view>
			</view>

			<view class="addressV">
				<view class="addressTv1">收货地址</view>
				<view class="orderInfoTv">订单号：{{orderInfo.out_trade_no}}</view>
				<view class="orderInfoTv2">创建时间：{{orderInfo.createtime}}</view>
				<view class="orderInfoTv2">支付方式：微信支付</view>
				<view class="orderInfoTv2">实付金额：¥{{orderInfo.order_price}}</view>
			</view>
		</view>

		<view class="bottomV">
			<view v-if="orderInfo.state==1" class="itemBt1" @click.stop="onOrderCancelClick(orderInfo)">取消订单</view>
			<view v-if="orderInfo.state==3" class="itemBt1" @click.stop="onOrderConfirmClick(orderInfo)">确认收货</view>
			<view v-if="orderInfo.state==1" class="itemBt2" @click.stop="onOrderPayClick(orderInfo)">立即支付</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				titleStyle: {
					"color": "#ffffff"
				},
				orderId: '',
				orderInfo: null,
			}
		},
		onLoad(e) {
			this.orderId = e.id;
			this.getOrderDetail();
		},
		methods: {
			getOrderDetail() {
				this.$api.getShoOrderDeyail({
					order_id: this.orderId
				}).then((res) => {
					this.orderInfo = res;
				}).catch((e) => {
					uni.$u.toast("请获取失败");
				})
			},
			onOrderEvaluateClick(item,ordId) {//评价
				this.$u.route({
					url: "/shop/order/orderEvaluate",
					params: {
						item: JSON.stringify(item),
						orderId:ordId
					}
				})
			},
			onOrderCancelClick(item) { //取消
				this.$api.getShoOrderCancel("", {
					params: {
						order_id: item.order_id,
					}
				}).then((res) => {
					this.mPage = 1
					this.getOrderDetail();
					uni.$u.toast("取消成功");
				}).catch((e) => {
					uni.$u.toast("取消失败");
				})
			},
			onOrderConfirmClick(item) { //确认
				this.$api.getShoOrderReceived("", {
					params: {
						order_id: item.order_id,
					}
				}).then((res) => {
					this.mPage = 1
					this.getOrderDetail();
					uni.$u.toast("确认成功");
				}).catch((e) => {
					uni.$u.toast("确认失败");
				})
			},
			onOrderPayClick(item) { //支付
				this.$api.getShoPay(
					"", {
						params: {
							order_id: item.order_id,
						}
					}).then((res) => {
					this.payOrder(res, item.order_id);
				}).catch((e) => {
					uni.$u.toast("支付失败");
				})
			},
			payOrder(payData, orderid) {
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: payData.timeStamp,
					nonceStr: payData.nonce_str,
					package: "prepay_id=" + payData.prepay_id,
					signType: "MD5",
					paySign: payData.paySign,
					success: function(res) {
						uni.$u.toast("支付成功");
						this.getOrderDetail();
						setTimeout(() => {
							uni.navigateBack();
						}, 1000)
					},
					fail: function(err) {
						uni.$u.toast("支付失败");
					}
				})
			},
		}
	}
</script>

<style>
	.addressV {
		background: #1F1F1F;
		border-radius: 10rpx;
		margin-top: 30rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
		padding: 30rpx;
	}

	.addressTv1 {
		font-size: 32rpx;
		color: #FFFFFF;
	}

	.addressTv2 {
		margin-top: 24rpx;
		color: #E8E8E8;
		font-size: 28rpx;
	}

	.addressTv3 {
		margin-top: 10rpx;
		color: #E8E8E8;
		font-size: 28rpx;
	}

	.infoBg {
		display: flex;
		margin-bottom: 20rpx;
	}

	.infoIv {
		width: 216rpx;
		height: 216rpx;
		border-radius: 10rpx;
		background-color: antiquewhite;
	}

	.infoRightV {
		display: flex;
		flex-direction: column;
		margin-left: 20rpx;
		flex: 1;
	}

	.infoTv1 {
		font-size: 28rpx;
		color: #fff;
	}

	.infoVV {
		margin-top: 12rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.infoTv2 {
		margin-top: 40rpx;
		font-size: 28rpx;
		color: #939393;
	}

	.infoTv3 {
		font-size: 28rpx;
		color: #939393;
	}

	.infoTv4 {
		font-size: 30rpx;
		color: #E6A5B4;
	}
	
	.orderInfoTv {
		font-size: 28rpx;
		color: #8D8D8D;
		margin-top: 24rpx;
	}

	.orderInfoTv2 {
		font-size: 28rpx;
		color: #8D8D8D;
		margin-top: 10rpx;
	}

	.bottomV {
		height: 98rpx;
		background: #1F1F1F;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		position: fixed;
		bottom: 0rpx;
		width: 90%;
	}

	.itemBt1 {
		border-radius: 30rpx;
		border: 2rpx solid #515151;
		font-size: 32rpx;
		color: #9B9B9B;
		padding-top: 4rpx;
		padding-bottom: 4rpx;
		padding-left: 15rpx;
		padding-right: 15rpx;
		margin-left: 30rpx;
	}

	.itemBt2 {
		padding-top: 4rpx;
		padding-bottom: 4rpx;
		padding-left: 15rpx;
		padding-right: 15rpx;
		border-radius: 30rpx;
		border: 2rpx solid #CEF743;
		font-size: 32rpx;
		color: #CEF743;
		margin-left: 30rpx;
	}
	
	.itemBt3 {
		border-radius: 30rpx;
		border: 2rpx solid #515151;
		font-size: 28rpx;
		color: #9B9B9B;
		padding-top: 2rpx;
		padding-bottom: 2rpx;
		padding-left: 10rpx;
		padding-right: 10rpx;
		width: fit-content;
		margin-top: 20rpx;
	}
</style>
